<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<title>列表-澳猫团</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/list.css">
	<base target="_blank">
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		var page = 1;  //当前页数
		var total = 1;  //总页数
		var pre = false;  //是否有上一页
		var next = false;  //是否有下一页
		var goodsName = "";  //商品名称
		var typeId = 0;  //类型id
		var brandId = 0;  //品牌id
		var priceType = 0;  //价格区间
		var orderCol = "";  //排序列名
		
		$(function(){
			//获取get参数值
			var str = "${param.typeId}";
			if (str) typeId = parseInt(str);
			str = "${param.goodsName}";
			if (str) goodsName = str;
			str = "${param.brandId}";
			if (str) brandId = parseInt(str);
			
			toPage(1);  //初始为第一页
			
			//翻页管理
			$("body").on("click", ".nextPage", function(){
				if (next) toPage(page + 1);
			})
			$("body").on("click", ".prePage", function(){
				if (pre) toPage(page - 1);
			})
			$("body").on("click", ".nextPage-2", function(){
				if (page + 2 <= total) toPage(page + 2);
			})
			$("body").on("click", ".prePage-2", function(){
				if (page - 2 >= 1) toPage(page - 2);
			})
			$("body").on("click", "#toPageBtn", function(){
				var t = $("#pageNum").val();
				if (t <= 1) toPage(1);
				else if (t >= total) toPage(total);
				else toPage(t);
			})
			
			//设置商品名称
			$("body").on("click", "#searchBtn", function(){
				goodsName = $("#inputName").val();
				toPage(1);
			})
		})
		
		//设置价格区间
		function setPriceType(btnVal) {
			priceType = btnVal;
			toPage(1);
		}
		
		//设置品牌id
		function setBrandId(btnVal) {
			brandId = btnVal;
			toPage(1);
		}
		
		//设置类型id
		function setTypeId(btnVal) {
			typeId = btnVal;
			toPage(1);
		}
		
		//设置排序方式
		function setOrderCol(btnVal) {
			orderCol = btnVal;
			toPage(1);
		}
		
		function toPage(pageNum){
			$.ajax({
				"url":"goodssearch.do",
				"data":{
					"pageNum": pageNum,
					"goodsName": goodsName,
					"typeId": typeId,
					"brandId": brandId,
					"priceType": priceType,
					"orderCol": orderCol
				},
				"type":"post",
				"dataType":"json",
				"success":function(data){
					$(".product ul li").remove();
					$(".footNum ul li").remove();
					var i = 1;
					var content = "";
					page = pageNum;
					total = data.pages;
					next = data.hasNextPage;
					pre = data.hasPreviousPage;
					//商品内容
					$(data.list).each(function(){
						content = "";
						if (i % 4 == 0) content+="<li class='mrNone'>";
						else content+="<li>";
						if (this.goodsTariff == 0 || this.goodsDiscount < 1) {
							content+="<p class='privilege clearfix'>";
							if (this.goodsTariff == 0) content+="<span class='y right'>包邮</span>";
							if (this.goodsDiscount < 1)
								content+="<span class='r left'>"+(this.goodsDiscount*10).toFixed(1)+"折</span>";
							content += "</p>";
						}
						content += ("<div class='show'>"
								+"<a class='add' href='<%=path%>/addCart.action?goodsId="+this.goodsId+"&addtoCartNum=1'>加入购物车</a>"
								+"<a class='contrast' href='#'>商品对比</a></div>"
								+"<div class='proImg'>"
								+"<a href='<%=path%>/goodsdetail.do?goodsId="+this.goodsId+"'>"
								+"<img class='lazy' src='"+this.goodsImg+"'></a></div>"
								+"<div class='proTxt'>"
								+"<p><a href='<%=path%>/goodsdetail.do?goodsId="+this.goodsId+"' style='display: block; height: 32px;'>"
								+this.goodsName+"</a></p>"
								+"<p class='num'>已售出"+this.goodsSaled+"件</p>"
								+"<p><strong>￥"+(this.goodsPrice*this.goodsDiscount).toFixed(2)+"</strong>"
						);
						if (this.goodsDiscount < 1) content+="<s>￥"+this.goodsPrice+"</s>";
						content+="</p></div></li>";
						$(".product ul").append(content);
						i++;
					})
					//页面选择
					content = "";
					content += "<li class='pre'><a class='prePage'>上一页</a></li>";
					if (!pre) {
						content += "<li class='num current'><a>"+page+"</a></li>";
						if (page + 1 <= total) content += "<li class='num'><a class='nextPage'>"+(page+1)+"</a></li>";
						if (page + 2 <= total) content += "<li class='num'><a class='nextPage-2'>"+(page+2)+"</a></li>";
					}
					else if (!next) {
						if (page - 2 >= 1) content += "<li class='num'><a class='prePage-2'>"+(page-2)+"</a></li>";
						if (page - 1 >= 1) content += "<li class='num'><a class='prePage'>"+(page-1)+"</a></li>";
						content += "<li class='num current'><a>"+page+"</a></li>";
					}
					else {
						content += "<li class='num'><a class='prePage'>"+(page-1)+"</a></li>";
						content += "<li class='num current'><a>"+page+"</a></li>";
						page++;
						content += "<li class='num'><a class='nextPage'>"+page+"</a></li>";
						page--;
					}
					content += ("<li class='last'><a class='nextPage'>下一页</a></li>"
							+"<li class='txt'>向第</li>"+"<li class='ipt'>"
							+"<input type='text' id='pageNum'></li>"
							+"<li><button id='toPageBtn'>跳转</button></li>"
					);
					$(".footNum ul").append(content);
				}
			})
		}
	</script>
</head>
<body>
	<header class="wrap-all">
		<div class="head center_1200">
			<!-- 头部左边 -->
			<div class="headLeft">
				<div class="hello">
					<a href="#">
						<em></em>
						<span>澳猫首页</span>
						<span>嗨，澳猫欢迎你！</span>
					</a>
				</div>
				<div class="user">
					<a target="_blank" href="#">登录</a>
					<span>|</span>
					<a target="_blank" href="#">免费注册</a>
				</div>
				<div class="phone">
					<a href="#">
						<em></em>
						<span>手机逛澳猫</span>
					</a>
				</div>
			</div>
			<!-- 头部右边 -->
			<!-- 头部右边 -->
			<div class="headRight">
				<ul>
					<li><a href="#">我的订单</a></li><span>|</span>
					<li class="erWrap">
						<strong></strong>
						<a href="#">个人中心</a>
						<em></em>
						<p class="headEr">
							<a href="#">我的优惠券</a>
							<a href="#">账户安全</a>
							<a class="last" href="#">售后管理</a>
						</p>
					</li>
					<span>|</span>
					<li class="erWrap">
						<a href="#">客户服务</a>
						<em></em>
						<p class="headEr">
							<a href="#">联系客服</a>
							<a href="#">购物指南</a>
							<a href="#">下单与配送</a>
							<a href="#">售后服务</a>
							<a href="#">商家服务</a>
							<a class="last" href="#">帮助中心</a>
						</p>
					</li>
					<span>|</span>
					<li class="erWrap">
						<a href="#">消费者告知书</a>
					</li>
					<span>|</span>
					<li class="erWrap">
						<a href="#">收藏夹</a>
						<em></em>
						<p class="headEr different">
							<a href="#">收藏的宝贝</a>
							<a class="last" href="#">收藏的品牌</a>
						</p>
					</li>
					<span>|</span>
					<li class="erWrap">
						<a href="#">帮助中心</a>
						<em></em>
						<p class="headEr">
							<a href="#">海外正品</a>
							<a href="#">服务保障</a>
							<a href="#">关税&清关</a>
							<a class="last" href="#">身份证报关</a>
						</p>
					</li><span>|</span>
					<li class="er_warp">
						<a href="#">网站导航</a>
						<em></em>
						<div class="headEr clearfix">
							<%--一级类型 --%>
							<c:forEach items="${applicationScope.goodsTypeList }" var="type">
								<div class="er_area">
									<h5>${type.typeName }</h5>
									<%--二级类型 --%>
									<c:forEach items="${type.childList }" var="child1">
										<%--三级类型 --%>
										<c:forEach items="${child1.childList }" var="child2">
											<a onclick="setTypeId(${child2.typeId })">${child2.typeName }</a>
										</c:forEach>
									</c:forEach>
								</div>
							</c:forEach>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</header>
	<!-- 搜索和logo -->
	<div class="logoAndSearch w1190 textWarp">
		<!-- logo -->
		<div class="logo">
			<a href="index.html">澳猫网</a>
		</div>
		<!-- 搜索 -->
		<div class="search">
				<div class="txt">
					<input class="SearchBttonValue" type="text" placeholder="商品名称" name="goodsName" id="inputName">
				</div>
				<a class="SearchBtton btn" id="searchBtn">
					搜索
				</a>
		</div>
		<!--购物车-->
		<a href="#" class="buy_car">
			<p>购物车</p>
			<em>0</em>
		</a>
	</div>
	<!-- 导航 -->
	<div class="wrap-all">
		<div class="center_1200 nav_list_wrap">
		<!--左边二级菜单-->
			<div class="main_menu">
				<a target="_self" href="#">全部商品分类</a>
				<div class="more_height"></div>
				<ul class="one_nav">
					<%--一级类型 --%>
					<c:forEach items="${applicationScope.goodsTypeList }" var="type">
						<li>
							<dl>
								<dt><h4>${type.typeName }</h4></dt>
								<dd>
									<c:forEach items="${type.childList }" var="child1">
										<span><a target="_self" onclick="setTypeId(${child1.typeId})">${child1.typeName }</a></span>
									</c:forEach>
								</dd>
							</dl>
							<ul class="two_nav">
								<c:forEach items="${type.childList }" var="child1">
									<li>
										<dl>
											<dt><h4>${child1.typeName }</h4></dt>
											<dd>
												<c:forEach items="${child1.childList }" var="child2">
													<a target="_self" onclick="setTypeId(${child2.typeId})">${child2.typeName }</a><i>|</i>
												</c:forEach>
											</dd>
										</dl>
									</li>
								</c:forEach>
							</ul>
						</li>
					</c:forEach>
					<!--暂空不绑定-->
					<li>
					</li>
				</ul>
			</div>
			<div class="nav_list_parent">
				<div class="nav_list_bg"></div>
				<ul class="nav_list clearfix">
				<!-- 右边导航菜单-->
					<li>
						<a target="_self" href="<%=path %>/index.jsp">首 页</a>
					</li>
					<li>
						<a target="_self" onclick="setTypeId(0)">特价团购</a>
						<em class="hot_sell"></em>
					</li>
					<c:forEach items="${applicationScope.goodsTypeList }" var="type">
						<li><a target="_self" onclick="setTypeId(${type.typeId})">${type.typeName }</a></li>
					</c:forEach>
				</ul>
			</div>
		</div>
	</div>
	<div class="mainArea">
		<!-- 位置导航 -->
		<div class="subnav w1190">
			<ul class="SNLeft"></ul>
		</div>
		<!-- 主要内容 -->
		<div class="content w1190 clearfix">
			<!-- 侧边 -->
			<div class="sidebar">
				<div class="hotSale">
					<h3>热卖排行榜</h3>
					<div class="HRproduct">
						<ul>
							<c:forEach items="${applicationScope.hotSaleGoods }" var="goods">
								<li>
									<div class="HRpic">
										<a href="<%=path %>/goodsdetail.do?goodsId=${goods.goodsId}">
											<img class="lazy" src="${goods.goodsImg }" height="144" width="122"/>
										</a>
									</div>
									<div class="HRtxt">
										<p><a href="<%=path %>/goodsdetail.do?goodsId=${goods.goodsId}">${goods.goodsName }</a></p>
										<p class="clearfix">
											<strong class="c065">
												￥<fmt:formatNumber type="number" value="${goods.goodsPrice*goods.goodsDiscount }" pattern="#.00"/>
											</strong>
											<c:if test="${goods.goodsDiscount < 1 }"><s>￥${goods.goodsPrice }</s></c:if>
										</p>
									</div>
								</li>
							</c:forEach>
						</ul>
					</div>
				</div>
			</div>
			<!-- 主要内容 -->
			<div class="mianContent">
				<!-- 商品筛选 -->
				<div class="screen">
					<!-- <h4 class="srenTitle clearfix">
						<span class="sreA">美可卓<em>×</em></span>
						<span class="sreA">0-199<em>×</em></span>	
					</h4> -->
					<div class="srenArea">
						<div class="brand clearfix">
							<h5>品牌</h5>
							<ul class="clearfix">
								<c:forEach items="${applicationScope.brandList }" var="brand">
									<li><a target="_self" onclick="setBrandId(${brand.brandId})">${brand.brandName }</a></li>
								</c:forEach>
							</ul>
						</div>
						<div class="price clearfix">
							<h5>价格</h5>
							<ul class="clearfix">
								<li><a target="_self" onclick="setPriceType(1)">0-199</a></li>
								<li><a target="_self" onclick="setPriceType(2)">200-399</a></li>
								<li><a target="_self" onclick="setPriceType(3)">400-599</a></li>
								<li><a target="_self" onclick="setPriceType(4)">600-799</a></li>
								<li><a target="_self" onclick="setPriceType(5)">800以上</a></li>
							</ul>
						</div>
					</div>
				</div>
				<!-- 筛选排序 -->
				<div class="sort clearfix">
					<ul class="condition clearfix">
						<li><a target="_self" onclick="setOrderCol('goods_id')">默认</a></li>
						<li><a target="_self" onclick="setOrderCol('goods_saled')">销量</a></li>
						<li><a target="_self" onclick="setOrderCol('goods_price*goods_discount')">价格</a></li>
					</ul>
					<div class="change">
						<span class="left">&lt;</span>
						<span class="right">&gt;</span>
					</div>
				</div>
				<!-- 商品内容 -->
				<div class="product">
					<ul class="clearfix"></ul>
				</div>
				<!-- 底部页码 -->
				<div class="footNum">
					<ul></ul>
				</div>
			</div>
		</div>
	</div>
	
	<script src="js/jquery-1.7.2.min.js"></script>
	<script src="js/jquery.lazyload.min.js"></script>
	<script src="js/base.js"></script>
</body>
</html>